// 静音
const closeVolume = (dom) => {
    dom.volume = 0
    dom.muted = true
}
// 开启音量
const openVolume = (dom) => {
    dom.volume = 1
    dom.muted = false
}
function fn(e) {
    e.preventDefault();
}
document.addEventListener('touchmove', fn, { passive: false });
$(document).ready(function () {
    new Vue({
        el: "#app",
        data: function () {
            return {
                myPlayer: null,
                myPlayer_01: null,

                sound1: 0,  // 第一个静音
                sound2: 0,
                showSound1: false,
                showSound2: false,

                goods_01_index: 0,  // 轮播1 索引
                goods_02_index: 0,  // 轮播2 索引

                onload: false,
                play: false
            };
        },
        watch: {
            'onload': function () {
                if (this.play) {
                    this.hiddenLoading()
                }
            },
            'play': function () {
                if (this.onload) {
                    this.hiddenLoading()
                }
            },
        },
        mounted: function () {
            // 初始化视频
            this.initVideo()
            // 初始化动画
            this.initGsap()

            this.initSwiper()
            // 初始化埋点
            this.initTrack()

            window.onload = () => {
                this.onload = true
            };
        },
        methods: {
            // 隐藏loading
            hiddenLoading() {
                let loading = document.querySelector('.loading')

                setTimeout(() => {
                    loading.style.opacity = '0'
                    document.removeEventListener('touchmove', fn);

                    this.sendMsg('changeBgColor', { color: '#121a2a' })

                }, 1000)
                setTimeout(() => {
                    loading.style.display = 'none'
                }, 1500)
            },

            //初始化gsap
            initGsap() {
                // 确保GSAP和ScrollTrigger正确加载
                if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
                    console.error("GSAP or ScrollTrigger not loaded");
                } else {
                    // 注册滚动插件
                    gsap.registerPlugin(ScrollTrigger);

                    // 注册动画
                    this.moveBox_01()   // 微动1
                    this.textAni_01()   // 文字1
                    this.moveBox_02()   // 微动2
                    this.textAni_02()   // 文字2
                    this.textAni_03()   // 文字3
                    this.moveBox_03()   // 微动3
                    this.superBox_01()  // 视差滚动模块
                }
            },

            // 初始化视频配置
            initVideo() {
                var _this = this;
                var VideoPlayer = lib.videoPlayer;
                let videoList = []

                _this.myPlayer = VideoPlayer("J_Video_Player", {
                    "custom-controls": "false", //隐藏底部控制栏
                });

                _this.myPlayer_01 = VideoPlayer('J_Video_Player_01', {
                    'custom-controls': 'false' //隐藏底部控制栏
                });

                videoList.push(_this.myPlayer, _this.myPlayer_01)

                videoList.forEach((item, index) => {
                    let dom = item.getVideoEl()
                    closeVolume(dom)
                    dom.oncanplay = () => {
                        console.log(index, '可以播放');
                    }

                    item.on("video:ended", function () {
                        item.play()
                    });

                    item.on("video:play", function (t) {
                        _this.play = true
                    });
                })

                // 滚动自动播放视频
                ScrollTrigger.create({
                    trigger: ".videoPlay_01",
                    start: "top bottom",
                    end: "bottom top",
                    onEnter: () => {
                        this.myPlayer.play();
                    },
                    onLeave: () => {
                        this.myPlayer.pause();
                    },
                    onEnterBack: () => {
                        this.myPlayer.play();
                    },
                    onLeaveBack: () => {
                        this.myPlayer.pause();
                    },
                })

                ScrollTrigger.create({
                    trigger: ".videoPlay_02",
                    start: "top bottom",
                    end: "bottom top",
                    onEnter: () => {
                        this.myPlayer_01.play();
                    },
                    onLeave: () => {
                        this.myPlayer_01.pause();
                    },
                    onEnterBack: () => {
                        this.myPlayer_01.play();
                    },
                    onLeaveBack: () => {
                        this.myPlayer_01.pause();
                    },
                })
            },

            // 初始化埋点
            initTrack() {
                const urlParams = new URLSearchParams(window.location.search);
                const openId = urlParams.get('openId') || 123123123;
                const channel = urlParams.get('channel') || 'h5';
                console.log(channel, "渠道");
                const userAgent = navigator.userAgent.toLowerCase();
                const platform = navigator.platform.toLowerCase();
                console.log(userAgent);
                console.log(platform);
                let equipment = ''

                if (/iphone|ipad|ipod/.test(userAgent)) {
                    equipment = 'ios'
                } else if (/android/.test(userAgent)) {
                    equipment = 'android'
                } else {
                    equipment = 'android'
                }

                console.log(equipment, '设备');
                this.mf_Tracker = new MF_Tracker({
                    code: "2697",
                    userid: openId,
                    channel
                });

                this.mf_Tracker.pvuv();
                this.mf_Tracker.custom(`${equipment}_进入`)
            },

            // 初始化轮播图
            initSwiper() {
                const _this = this
                new Swiper('#swiper1', {
                    pagination: {
                        el: '#swiper-pagination_01',
                        color: 'orange'
                    },
                    loop: true,
                    on: {
                        slideChange: function (e) {
                            _this.goods_01_index = this.realIndex
                        },
                    },
                })

                new Swiper('#swiper2', {
                    pagination: {
                        el: '#swiper-pagination_02',
                        color: 'orange'
                    },
                    loop: true,
                    on: {
                        slideChange: function (e) {
                            _this.goods_02_index = this.realIndex
                        },
                    },
                })
            },

            // 微动模块_01_动画 
            moveBox_01() {
                const timeline = gsap.timeline({
                    scrollTrigger: {
                        trigger: ".move1Box_img",
                        start: "top 100%", // 滚动触发的起始位置
                        end: "bottom 0%", // 固定的结束位置
                        scrub: true, // 启用平滑滚动
                    },
                });

                timeline.to(".move1Box_img", {
                    y: '-1.2rem',
                    ease: "Power2.easeInOut",
                    duration: 1,
                });
            },

            // 文字模块_01_动画
            textAni_01() {
                gsap.timeline({
                    scrollTrigger: {
                        trigger: ".msgBox1",
                        start: "top 90%", // 滚动触发的起始位置
                        scrub: true, // 启用平滑滚动
                        once: true,
                        onEnter: () => {
                            gsap.fromTo(".msgBox1_text1", {
                                opacity: 0,
                                x: "-2.6667rem"
                            }, {
                                opacity: 1,
                                x: 0,
                                duration: 2,
                                ease: "power1.out"
                            })
                            gsap.fromTo(".msgBox1_text2", {
                                opacity: 0,
                                y: '0.8rem'
                            }, {
                                opacity: 1,
                                y: 0,
                                duration: 1,
                                ease: "power1.out"
                            }, "<50%")

                            gsap.fromTo(".msgBox1_text3", {
                                opacity: 0,
                                y: '0.8rem'
                            }, {
                                opacity: 1,
                                y: 0,
                                duration: 1,
                                ease: "power1.out"
                            }, "<25%")

                        }
                    },
                });
            },

            // 微动模块_02_动画 
            moveBox_02() {
                const timeline = gsap.timeline({
                    scrollTrigger: {
                        trigger: ".move2Box",
                        start: "top 100%", // 滚动触发的起始位置
                        end: "bottom 0%", // 固定的结束位置
                        scrub: true, // 启用平滑滚动
                    },
                });

                timeline.to(".move2Box_img", {
                    y: '-2rem',
                    ease: "Power2.easeInOut",
                    duration: 1,
                });
            },

            // 文字模块_02_动画
            textAni_02() {
                gsap.timeline({
                    scrollTrigger: {
                        trigger: ".msgBox2",
                        // pin: true, // 启用固定
                        // markers: true,
                        start: "top 90%", // 滚动触发的起始位置
                        // end: "+100%", // 固定的结束位置
                        scrub: true, // 启用平滑滚动
                        once: true,
                        onEnter: () => {
                            gsap.fromTo(".msgBox2_text1", {
                                opacity: 0,
                                x: '2.6667rem'
                            }, {
                                opacity: 1,
                                x: 0,
                                duration: 2,
                                ease: "power1.out"
                            })
                            gsap.fromTo(".msgBox2_text2", {
                                opacity: 0,
                                y: '0.8rem'
                            }, {
                                opacity: 1,
                                y: 0,
                                duration: 1,
                                ease: "power1.out"
                            }, "<50%")

                            gsap.fromTo(".msgBox2_text3", {
                                opacity: 0,
                                y: '0.8rem'
                            }, {
                                opacity: 1,
                                y: 0,
                                duration: 1,
                                ease: "power1.out"
                            }, "<25%")
                        }
                    },
                });
            },


            // 文字模块_03_动画
            textAni_03() {
                gsap.timeline({
                    scrollTrigger: {
                        trigger: ".msgBox3",
                        start: "top 90%", // 滚动触发的起始位置
                        scrub: true, // 启用平滑滚动
                        once: true,
                        onEnter: () => {
                            gsap.fromTo(".msgBox3_text1", {
                                opacity: 0,
                                x: "-2.6667rem"
                            }, {
                                opacity: 1,
                                x: 0,
                                duration: 2,
                                ease: "power1.out"
                            })
                            gsap.fromTo(".msgBox3_text2", {
                                opacity: 0,
                                y: '0.8rem'
                            }, {
                                opacity: 1,
                                y: 0,
                                duration: 1,
                                ease: "power1.out"
                            }, "<50%")

                            gsap.fromTo(".msgBox3_text3", {
                                opacity: 0,
                                y: '0.8rem'
                            }, {
                                opacity: 1,
                                y: 0,
                                duration: 1,
                                ease: "power1.out"
                            }, "<25%")
                        }
                    },
                });
            },

            // 微动模块_03_动画 
            moveBox_03() {
                const timeline = gsap.timeline({
                    scrollTrigger: {
                        trigger: ".move3Box_img",
                        start: "top 100%", // 滚动触发的起始位置
                        end: "bottom 0%", // 固定的结束位置
                        scrub: true, // 启用平滑滚动
                    },
                });

                timeline.to(".move3Box_img", {
                    // backgroundPosition: "50% -10vh",
                    y: "-0.2rem",
                    ease: "Power2.easeInOut",
                    duration: 1,
                });
            },

            // 特殊模块_01_动画
            superBox_01() {
                const timeline = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#pinnedElement",
                        pin: true, // 启用固定
                        start: "top top", // 滚动触发的起始位置
                        end: "+450%", // 固定的结束位置
                        scrub: 0.25, // 启用平滑滚动
                    },
                });

                timeline.to(
                    ".text", {
                    opacity: 1,
                    duration: 1,
                    ease: "power2.inOut"
                },
                    "0"
                )
                    .to(
                        ".text", {
                        opacity: 0,
                        duration: 1,
                        ease: "power2.inOut"
                    }, "1"
                    )
                    .to(".superImgBox", {
                        width: "100vw",
                        height: "100vh",
                        clipPath: "inset(0% 0%)",
                        duration: 2,
                        ease: "power2.out",
                    }, "1.5"
                    )
                    .to(
                        ".btn", {
                        opacity: 1,
                        duration: 1,
                        ease: "power2.inOut"
                    }, "3.5"
                    );

            },

            // 第一个视频静音
            sound1_fn_01() {
                let dom = this.myPlayer.getVideoEl()

                // 2.5s自动保存
                clearTimeout(this.timer1)
                this.timer1 = setTimeout(() => {
                    this.showSound1 = false
                }, 2500)

                if (this.sound1 === 0) {
                    openVolume(dom)
                    this.sound1 = 1
                    this.soundTrack('sound2', "声音")
                } else if (this.sound1 === 1) {
                    closeVolume(dom)
                    this.sound1 = 0
                    this.soundTrack('sound2', "静音")
                }
            },

            // 第2个视频静音
            sound1_fn_02() {
                let dom = this.myPlayer_01.getVideoEl()

                // 2.5s自动保存
                clearTimeout(this.timer2)
                this.timer2 = setTimeout(() => {
                    this.showSound2 = false
                }, 2500)

                if (this.sound2 === 0) {
                    openVolume(dom)
                    this.sound2 = 1
                    this.soundTrack('sound1', "声音")
                } else if (this.sound2 === 1) {
                    closeVolume(dom)
                    this.sound2 = 0
                    this.soundTrack('sound1', "静音")
                }
            },

            // 控制显示音量
            changeSound(which) {
                switch (which) {
                    case 1:
                        clearTimeout(this.timer1)
                        this.showSound1 = !this.showSound1
                        this.timer1 = setTimeout(() => {
                            this.showSound1 = false
                        }, 2500)
                        break;
                    case 2:
                        clearTimeout(this.timer2)
                        this.showSound2 = !this.showSound2
                        this.timer2 = setTimeout(() => {
                            this.showSound2 = false
                        }, 2500)
                        break;
                    default:
                        break;
                }
            },

            // webView通信函数
            sendMsg(action, param) {
                if (typeof my !== "undefined") {
                    // 淘宝环境
                    my.postMessage({
                        action: action,
                        param: param
                    });
                } else {
                    console.log('不支持通信');
                }
            },

            // webView通信
            send(type, soundState) {
                if (this.padding) return
                this.padding = true
                setTimeout(() => {
                    this.padding = false
                }, 2000)
                const { goods_01_index, goods_02_index, mf_Tracker } = this
                switch (type) {
                    case 'video':
                        this.sendMsg('showSku', { itemId: '581732170816', skuId: '4724290305786' })
                        console.log(`视频_加购_581732170816_4724290305786`);
                        mf_Tracker.custom(`视频_加购_581732170816_4724290305786`)
                        break;

                    case 'swiper1_cart':
                        let goodsList1 = [
                            { itemId: '581732170816', skuId: '4724290305786' },
                            { itemId: '581732170816', skuId: '4724290305785' },
                            { itemId: '581732170816', skuId: '4724290305784' }
                        ]
                        this.sendMsg('showSku', goodsList1[goods_01_index])
                        console.log(`轮播1_${goods_01_index + 1}_加购_${goodsList1[goods_01_index].itemId}_${goodsList1[goods_01_index].skuId}`);
                        mf_Tracker.custom(`轮播1_${goods_01_index + 1}_加购_${goodsList1[goods_01_index].itemId}_${goodsList1[goods_01_index].skuId}`)
                        break;

                    case 'swiper1_PDP':
                        let PDPList1 = [
                            'https://detail.tmall.com/item.htm?id=581732170816',
                            'https://detail.tmall.com/item.htm?id=581732170816',
                            'https://detail.tmall.com/item.htm?id=581732170816'
                        ]
                        this.sendMsg('navigateToOutside', { url: PDPList1[goods_01_index] })
                        console.log(`轮播1_${goods_01_index + 1}_PDP`);
                        mf_Tracker.custom(`轮播1_${goods_01_index + 1}_PDP`)
                        break;

                    case 'swiper2_cart':
                        let goodsList2 = [
                            { itemId: '583060271686', skuId: '3913321164864' },
                            { itemId: '721545415640', skuId: '5022907525581' },
                            { itemId: '714459829053', skuId: '5169266738819' }
                        ]
                        this.sendMsg('showSku', goodsList2[goods_02_index])
                        console.log(`轮播2_${goods_02_index + 1}_加购_${goodsList2[goods_02_index].itemId}_${goodsList2[goods_02_index].skuId}`);
                        mf_Tracker.custom(`轮播2_${goods_02_index + 1}_加购_${goodsList2[goods_02_index].itemId}_${goodsList2[goods_02_index].skuId}`)
                        break;

                    case 'swiper2_PDP':
                        let PDPList2 = [
                            'https://detail.tmall.com/item.htm?id=583060271686',
                            'https://detail.tmall.com/item.htm?id=721545415640',
                            'https://detail.tmall.com/item.htm?id=714459829053'
                        ]
                        this.sendMsg('navigateToOutside', { url: PDPList2[goods_02_index] })
                        console.log(`轮播2_${goods_02_index + 1}_PDP`);
                        mf_Tracker.custom(`轮播2_${goods_02_index + 1}_PDP`)
                        break;

                    case 'goods_1':
                        this.sendMsg('showSku', { itemId: '581732170816', skuId: '4724290305786' })
                        console.log(`商品介绍1_加购_581732170816_4724290305786`);
                        mf_Tracker.custom(`商品介绍1_加购_581732170816_4724290305786`)
                        break;

                    case 'goods_2':
                        this.sendMsg('navigateToOutside', { url: 'https://shop.m.taobao.com/shop/sr.htm?p=4AKjzq_ioO9h_0_l8qMM' })
                        console.log(`商品介绍2_页面跳转`);
                        mf_Tracker.custom(`商品介绍2_页面跳转`)
                        break;

                    case 'goods_3':
                        this.sendMsg('navigateToOutside', { url: '//shop271886695.m.taobao.com/#list?catId=1460094208' })
                        console.log(`商品介绍3_页面跳转`);
                        mf_Tracker.custom(`商品介绍3_页面跳转`)
                        break;

                    case 'super':
                        this.sendMsg('navigateToOutside', { url: '//shop271886695.m.taobao.com/#list?catId=1460094208' })
                        console.log(`页面结尾_页面跳转`);
                        mf_Tracker.custom(`页面结尾_页面跳转`)
                        break;
                    default:
                        break;
                }
            },

            // 视频声音埋点
            soundTrack(type, status) {
                const { mf_Tracker } = this

                switch (type) {
                    case 'sound1':
                        console.log(`视频1_${status}`);
                        mf_Tracker.custom(`视频1_${status}`)
                        break;

                    case 'sound2':
                        console.log(`视频2_${status}`);
                        mf_Tracker.custom(`视频2_${status}`)
                        break;
                    default:
                        break;
                }
            }
        }
    });
});